<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="500" height="500" id="oCanvas">

    </canvas>
    <!-- 顶点坐标及size 内置变量 -->
    <script id="vertex" type="nots">
        attribute vec2 a_position;
        attribute vec4 a_color;
        uniform vec2 screenSize;
        varying vec4 v_color; 
        void main(){
            float y = 1.0 - a_position.y*2.0/screenSize.y;
            float x = a_position.x*2.0/screenSize.x -1.0;
            gl_Position = vec4(x,y,0,1);
            gl_PointSize = 10.0;
            v_color = a_color;

        }
    </script>
    <!-- 着色器 vec4 代表rgba 内置变量-->
    <script id="fragment" type="notjs">
        precision mediump float;
        varying vec4 v_color;
        void main(){
            gl_FragColor = v_color;
        }
    </script>
    <script>
        const oCanvas = document.querySelector("#oCanvas")
        const gl= oCanvas.getContext("webgl")
        if(!gl){
            alert("浏览器不支持webgl")
        }
        // 创建着色器函数
        function createShader(gl,type,source){
            // type gl.VERTEX_SHADER gl.FRAGMENT_SHADER类型
            // 创建着色器 
            var shader = gl.createShader(type)
            // 想着色器中添加资源
            // shader 着色器
            // source 添加的程序(字符串类型)
            gl.shaderSource(shader,source);
            // 编译着色器
            gl.compileShader(shader)
             const status= gl.getShaderParameter(shader,gl.COMPILE_STATUS)
              console.log(status)
             if(status){
                // 成功返回shader
                return shader;
             }
            //  失败获取编译信息
             console.log(gl.getShaderInfoLog(shader))
             
        }
        var vertexStr = document.getElementById("vertex").innerText
        var fragmentStr = document.getElementById("fragment").innerText
        // console.log(vertexStr)
        // console.log(fragmentStr)

        var vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexStr)
        var fragmentShader = createShader(gl,gl.FRAGMENT_SHADER,fragmentStr)
        // console.log(vertextShader)
        // console.log(fragmentShader)
        // 创建程序函数
        function createProgram(gl,vertexShader,fragmentShader){
            // 创建程序
            var program =gl.createProgram()
            // 绑定着色器程序 
            // gl.attachShader(program,shader)
            gl.attachShader(program,vertexShader)
            gl.attachShader(program,fragmentShader)
            // 连接着色器程序
            gl.linkProgram(program)
            const status= gl.getProgramParameter(program,gl.LINK_STATUS)
              console.log(status)
             if(status){
                // 成功返回shader
                return program;
             }
             console.log(gl.getProgramInfoLog(shader))
        }
        var program = createProgram(gl,vertexShader,fragmentShader)
        console.log(program)
        // 使用程序 useProgram
        gl.useProgram(program)
        
        // 清空画布 清空颜色
        gl.clearColor(0,0,1,1)
        // 清空缓冲区
        gl.clear(gl.COLOR_BUFFER_BIT)
        // 获取attribute变量的 存储位置 参数 program  程序对象 name 变量名称
        // 返回值 
        var a_position = gl.getAttribLocation(program,'a_position')
        var a_color = gl.getAttribLocation(program,'a_color')

          // 获取uniform变量的 存储位置 参数 program  程序对象 name 变量名称
        var screenSize = gl.getUniformLocation(program,'screenSize')
        
        gl.uniform2f(screenSize,oCanvas.width,oCanvas.height)
        // 点击函数
        var points = [];
        function bindEvent(){
            oCanvas.onmousedown = function(e){
                 // 清空画布 清空颜色
                gl.clearColor(0,0,1,1)
                // 清空缓冲区
               gl.clear(gl.COLOR_BUFFER_BIT)
                // 鼠标x坐标
                var x = e.offsetX
                // y坐标
                var y = e.offsetY
                var color = randomColor()
                points.push({
                    x,y,color
                })
                for (let index = 0; index < points.length; index++) {
                    const element = points[index];
                     // 传参 location (变量的存储位置 ；v0 v1 v2 分量值)，分量类似对象上对应的属性
                        gl.vertexAttrib3f(a_position,element.x,element.y,0.0)
                        // 
                        gl.vertexAttrib4f(a_color,element.color.r,element.color.g,element.color.b,element.color.a)
                        gl.drawArrays(gl.POINTS,0,1)
                    
                }
                // // 传参 location (变量的存储位置 ；v0 v1 v2 分量值)，分量类似对象上对应的属性
                // gl.vertexAttrib3f(a_position,x,y,0.0)
                // // 
               
            }
        }
        function randomColor(){
            var r = Math.random()
            var g = Math.random()
            var b = Math.random()
            var a = 0.5+0.5*Math.random()
            return {r,g,b,a}
        }
        // 绘制点 绘制方式，从哪个点开始绘制，绘制用到多少个顶点
        bindEvent()
   </script>
</body>
</html>